<template>
  <div style="padding: 0 16px">
    <t-swiper :autoplay="true" height="192px"
      :navigation="{ type: 'dots-bar' }">
      <t-swiper-item v-for="(item, index) in swiperList" :key="index">
        <t-image fit="contain" position="center"
          :src="item"></t-image>
      </t-swiper-item>
    </t-swiper>
  </div>
  <div class="pb-64px">
    <Waterfall :list="list" :breakpoints="breakpoints">
      <!-- v2.6.0之前版本插槽数据获取 -->
      <!-- <template #item="{ item, url, index }"> -->
      <!-- 新版插槽数据获取 -->
      <template #default="{ item, url, index }">
        <div class="card" @click="handleClick(item)">
          <!-- <LazyImg :url="url" /> -->
          <t-image fit="contain" position="center"
            :src="url"></t-image>
          <p class="font-semibold mt-1">{{ item.title }}</p>
          <p class="font-mono mt-1">发布时间: {{ item.time }}</p>
        </div>
      </template>
    </Waterfall>
  </div>
</template>

<script setup lang="ts">
  import { state } from '@/components/State.js'
  import { game1, game2, game3, game4, game5, game6, game7 } from '@/assets/images'
  // import dayjs from 'dayjs'
  import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
  import 'vue-waterfall-plugin-next/dist/style.css'
  import { useRouter } from 'vue-router'
  import { useStore } from '@/store/loginState'

  const loginState = useStore()
  const router = useRouter()
  const swiperList = [
    game1, game2, game3,
  ]
  const handleClick = (item) => {
    if (loginState.logined) {
      state.item = item
      router.push({
        name: "detail",
      })
    } else {
      loginState.loginVisiableShow()
    }
  }

 
  const list = loginState.homeList
  // const list = [
  //   {
  //     src: game1,
  //     time,
  //     title: "一起玩，上车走",
  //     people: "1/2",
  //     mail: "329106955@qq.com"
  //   },
  //   {
  //     src: game2,
  //     time,
  //     title: "开黑五等四",
  //     people: "2/5",
  //     mail: "450126954@qq.com"
  //   },
  //   {
  //     src: game3,
  //     time,
  //     title: "3缺1,匹配速刷",
  //     people: "2/4",
  //     mail: "hunmm@163.com"
  //   },
  //   {
  //     src: game4,
  //     time,
  //     title: "双排速度来人",
  //     people: "1/2",
  //     mail: "wuxggg@163.com"
  //   },
  //   {
  //     src: game5,
  //     time,
  //     title: "三排，速战速决",
  //     people: "2/3",
  //     mail: "456345567@hotmail.com"
  //   },
  //   {
  //     src: game6,
  //     time,
  //     title: "国服打野,在线等",
  //     people: "2/4",
  //     mail: "penghao111@163.com"
  //   },
  //   {
  //     src: game7,
  //     time,
  //     title: "国服打野带飞",
  //     people: "3/4",
  //     mail: "wuzhangwang@qq.com"
  //   },
  // ]

  const breakpoints = {
    1200: {
      rowPerView: 3,
    },
    800: {
      rowPerView: 2
    },
    500: {
      rowPerView: 2
    },
  }

</script>

<style scoped lang="less"></style>
